<script>
  export default {
    layout: 'admin',
    data() {
      /**
       * 校验省市区四级级联
       * @param rule
       * @param {number} value
       * @param {function} callback 回调函数
       */
      let checkAuditRemark = (rule, value, callback) => {
        let auditForm = this.auditForm;
        if (auditForm.status === 1 && !value) {
          return callback(new Error('审核拒绝，审核回复不能为空'))
        }
        // 校验通过
        callback();
      }
      return {
        // 商店对象
        store: {
          // 基础数据
          storeForm: {
            // 主键
            id: undefined,
            // 业务主键
            businessId: undefined,
            // 名称
            name: undefined,
            // 省份名称
            addressProvinceName: "",
            // 城市名称
            addressCityName: undefined,
            // 区县名称
            addressDistrictName: undefined,
            // 街道名称
            addressStreetName: undefined,
            // 详细门牌号
            address: undefined,
            // 面积
            area: undefined,
            // 经营大类
            mainClass: undefined,
            // 经营大类名称
            mainClassName: '',
            // 经营小类
            subClass: undefined,
            // 经营小类名称
            subClassName: '',
            // 状态
            status: undefined
          },
          // 账户数据
          accountForm: {
            // 主键
            id: undefined,
            // 账户类型[0-对公  1-对私]
            type: 0,
            // 姓名
            name: undefined,
            // 身份证号
            idCard: undefined,
            // 企业名称
            enterpriseName: undefined,
            // 企业社会统一信用代码
            enterpriseNo: undefined,
            // 银行卡号
            bankNo: undefined,
            // 银行名称
            bankName: undefined,
            // 支行名称
            bankBranchName: undefined,
            // 银行预留手机号
            bankMobile: undefined,
            // 银行所在城市名称
            bankCityName: undefined
          },
          // 老板数据
          bossForm: {
            // 主键
            id: undefined,
            // 名称
            name: undefined,
            // 性别[0-男 1-女]
            gender: undefined,
            // 身份证号
            idCard: undefined,
            // 手机号
            mobile: undefined
          },
          // 商店提交审核记录
          historyList: [],
          // 商店审核记录列表
          auditGroupList: [],
        },
        // 商店对比对象
        contrastStore: {
          // 是否展示对比[true-是 false-否]
          showContrast: false,
          // 基础数据
          storeForm: {
            // 名称
            name: undefined,
            // 更新名称
            updateName: false,
            // 省份名称
            addressProvinceName: undefined,
            // 更新省份名称
            updateAddressProvinceName: false,
            // 城市名称
            addressCityName: undefined,
            // 更新城市名称
            updateAddressCityName: false,
            // 区县名称
            addressDistrictName: undefined,
            // 更新区县名称
            updateAddressDistrictName: false,
            // 街道名称
            addressStreetName: undefined,
            // 更新街道名称
            updateAddressStreetName: false,
            // 详细门牌号
            address: undefined,
            // 更新详细门牌号
            updateAddress: false,
            // 面积
            area: undefined,
            // 更新面积
            updateArea: false,
            // 经营大类
            mainClass: undefined,
            // 经营大类名称
            mainClassName: '',
            // 更新经营大类
            updateMainClass: false,
            // 经营小类
            subClass: undefined,
            // 经营小类名称
            subClassName: '',
            // 更新经营小类
            updateSubClass: false
          },
          // 账户数据
          accountForm: {
            // 账户类型[0-对公  1-对私]
            type: undefined,
            // 更新账户类型
            updateType: false,
            // 姓名
            name: undefined,
            // 更新姓名
            updateName: false,
            // 身份证号
            idCard: undefined,
            // 更新身份证号
            updateIdCard: false,
            // 企业名称
            enterpriseName: undefined,
            // 更新企业名称
            updateEnterpriseName: false,
            // 企业社会统一信用代码
            enterpriseNo: undefined,
            // 更新企业社会统一信用代码
            updateEnterpriseNo: false,
            // 银行卡号
            bankNo: undefined,
            // 更新银行卡号
            updateBankNo: false,
            // 银行名称
            bankName: undefined,
            // 更新银行名称
            updateBankName: false,
            // 支行名称
            bankBranchName: undefined,
            // 更新支行名称
            updateBankBranchName: false,
            // 银行预留手机号
            bankMobile: undefined,
            // 更新银行预留手机号
            updateBankMobile: false,
            // 银行所在城市名称
            bankCityName: undefined,
            // 更新银行所在城市名称
            updateBankCityName: false
          },
          // 老板数据
          bossForm: {
            // 名称
            name: undefined,
            // 更新名称
            updateName: false,
            // 性别[0-男 1-女]
            gender: undefined,
            // 更新性别
            updateGender: false,
            // 身份证号
            idCard: undefined,
            // 更新身份证号
            updateIdCard: false,
            // 手机号
            mobile: undefined,
            // 更新手机号
            updateMobile: false
          }
        },
        // 当前正在作为版本比较的商店主键
        contrastStoreId: undefined,
        // 数据加载状态[false-不加载 true-加载]
        dataLoad: false,
        // 按钮状态[false-可用 true-禁用]
        buttonLoad: false,
        // 页面模块列表
        module: {
          // 历史审核记录模块
          historyAuditM: {
            // 模块名称
            name: '历史审核记录',
            // 模块ref名称
            refName: 'historyAuditRef',
            // 展开状态[true-展开 false-收缩]
            isExpand: true,
          },
          // 基础信息模块
          storeM: {
            name: '基础信息',
            refName: 'storeRef',
            isExpand: true,
          },
          // 账户信息模块
          accountM: {
            name: '账户信息',
            refName: 'accountRef',
            isExpand: true,
          },
          // 老板信息模块
          bossM: {
            name: '老板信息',
            refName: 'bossRef',
            isExpand: true,
          },
          // 审核模块
          auditM: {
            name: '审核',
            refName: 'auditRef',
            isExpand: true,
          },
        },
        // 审核表单对象
        auditForm: {
          // 商店主键
          storeId: undefined,
          // 业务主键
          businessId: undefined,
          // 审核类型
          type: undefined,
          // 审核结果[0-通过 1-拒绝]
          status: undefined,
          // 审核备注
          auditRemark: ""
        },
        // 审核表单数据校验规则对象
        auditRules: {
          status: [
            { required: true, message: '审核结果不能为空', trigger: 'blur' }
          ],
          auditRemark: [
            { required: true, validator: checkAuditRemark, trigger: 'blur' }
          ],
        },
        // 是否修改审核
        isAuditModify: false,
        // 商店管理页面检索参数
        prePageSearchForm: '',
      }
    },
    computed: {
      // 账户类型名称
      typeName() {
        let type = this.store.accountForm.type;
        if (type == null) {
          return '';
        }
        return type === 0 ? '对公' : '对私'
      },
      // 账户类型名称
      preTypeName() {
        let type = this.contrastStore.accountForm.type;
        if (type == null) {
          return '';
        }
        return type === 0 ? '对公' : '对私'
      },
      // 老板性别
      genderName() {
        let gender = this.store.bossForm.gender;
        if (gender == null) {
          return '';
        }
        return gender === 0 ? '男' : '女';
      },
      // 老板性别
      preGenderName() {
        let gender = this.contrastStore.bossForm.gender;
        if (gender == null) {
          return '';
        }
        return gender === 0 ? '男' : '女';
      }

    },
    asyncData({ app, params, redirect } ) {
      let pageData = {
        // 商店对象
        store: {
          // 基础数据
          storeForm: {
            // 主键
            id: undefined,
            // 业务主键
            businessId: undefined,
            // 名称
            name: undefined,
            // 省份名称
            addressProvinceName: "",
            // 城市名称
            addressCityName: undefined,
            // 区县名称
            addressDistrictName: undefined,
            // 街道名称
            addressStreetName: undefined,
            // 详细门牌号
            address: undefined,
            // 面积
            area: undefined,
            // 经营大类
            mainClass: undefined,
            // 经营大类名称
            mainClassName: '',
            // 经营小类
            subClass: undefined,
            // 经营小类名称
            subClassName: ''
          },
          // 账户数据
          accountForm: {
            // 主键
            id: undefined,
            // 账户类型[0-对公  1-对私]
            type: undefined,
            // 姓名
            name: undefined,
            // 身份证号
            idCard: undefined,
            // 企业名称
            enterpriseName: undefined,
            // 企业社会统一信用代码
            enterpriseNo: undefined,
            // 银行卡号
            bankNo: undefined,
            // 银行名称
            bankName: undefined,
            // 支行名称
            bankBranchName: undefined,
            // 银行预留手机号
            bankMobile: undefined,
            // 银行所在城市名称
            bankCityName: undefined
          },
          // 老板数据
          bossForm: {
            // 主键
            id: undefined,
            // 名称
            name: undefined,
            // 性别[0-男 1-女]
            gender: undefined,
            // 身份证号
            idCard: undefined,
            // 手机号
            mobile: undefined
          },
          // 商店提交审核记录
          historyList: [],
          // 商店审核记录列表
          auditGroupList: [],
        },
        // 商店对比对象
        contrastStore: {
          showContrast: false,
          storeForm: {
            name: undefined,
            updateName: false,
            addressProvinceName: undefined,
            updateAddressProvinceName: false,
            addressCityName: undefined,
            updateAddressCityName: false,
            addressDistrictName: undefined,
            updateAddressDistrictName: false,
            addressStreetName: undefined,
            updateAddressStreetName: false,
            address: undefined,
            updateAddress: false,
            area: undefined,
            updateArea: false,
            mainClass: undefined,
            updateMainClass: false,
            subClass: undefined,
            updateSubClass: false
          },
          accountForm: {
            type: undefined,
            updateType: false,
            name: undefined,
            updateName: false,
            idCard: undefined,
            updateIdCard: false,
            enterpriseName: undefined,
            updateEnterpriseName: false,
            enterpriseNo: undefined,
            updateEnterpriseNo: false,
            bankNo: undefined,
            updateBankNo: false,
            bankName: undefined,
            updateBankName: false,
            bankBranchName: undefined,
            updateBankBranchName: false,
            bankMobile: undefined,
            updateBankMobile: false,
            bankCityName: undefined,
            updateBankCityName: false
          },
          bossForm: {
            name: undefined,
            updateName: false,
            gender: undefined,
            updateGender: false,
            idCard: undefined,
            updateIdCard: false,
            mobile: undefined,
            updateMobile: false
          }
        },
        contrastStoreId: undefined,
        auditForm: {
          type: params.type
        },
        isAuditModify: params.isAuditModify,
        prePageSearchForm: params.prePageSearchForm
      }
      if (!params.id) {
        return redirect({ name: 'admin-store-assign'});
      }
      pageData.contrastStoreId = params.id;

      return app.$axios.$get('/audit-store/audit/detail', { params: { id: params.id, contrastStatus: 0 }})
        .then(({ data }) => {
          let storeDto = data.storeDto;
          let preStoreDto = data.preStoreDto;
          let storeAccountDto = data.storeAccountDto;
          let preStoreAccountDto = data.preStoreAccountDto;
          let storeBossDto = data.storeBossDto;
          let preStoreBossDto = data.preStoreBossDto;
          let historyList = data.historyList;
          let auditGroupList = data.auditGroupList;
          // 商店基础
          let storeForm = pageData.store.storeForm;
          for (let propKey in storeForm) {
            if (storeDto.hasOwnProperty(propKey)) {
              storeForm[propKey] = storeDto[propKey];
            }
          }
          // 商店账户
          let accountForm = pageData.store.accountForm;
          for (let propKey in accountForm) {
            if (storeAccountDto.hasOwnProperty(propKey)) {
              accountForm[propKey] = storeAccountDto[propKey];
            }
          }
          // 商店老板
          let bossForm = pageData.store.bossForm;
          for (let propKey in bossForm) {
            if (storeBossDto.hasOwnProperty(propKey)) {
              bossForm[propKey] = storeBossDto[propKey];
            }
          }
          pageData.store.historyList = historyList;
          pageData.store.auditGroupList = auditGroupList;

          // 商店基础
          if (preStoreDto) {
            const preStoreForm = pageData.contrastStore.storeForm;
            for (let propKey in preStoreForm) {
              if (preStoreDto.hasOwnProperty(propKey)) {
                preStoreForm[propKey] = preStoreDto[propKey];
              }
              if (propKey.startsWith("update")) {
                let key = propKey.slice(6);
                key = key.charAt(0).toLowerCase() + key.slice(1);
                preStoreForm[propKey] = storeForm[key] !== preStoreForm[key];
              }
            }
            // 展示对比
            pageData.contrastStore.showContrast = true;
          }
          // 商店账户
          if (preStoreAccountDto) {
            const preAccountForm = pageData.contrastStore.accountForm;
            for (let propKey in preAccountForm) {
              if (preStoreAccountDto.hasOwnProperty(propKey)) {
                preAccountForm[propKey] = preStoreAccountDto[propKey];
              }
              if (propKey.startsWith("update")) {
                let key = propKey.slice(6);
                key = key.charAt(0).toLowerCase() + key.slice(1);
                preAccountForm[propKey] = accountForm[key] !== preAccountForm[key];
              }
            }
          }
          // 商店老板
          if (preStoreBossDto) {
            const preBossForm = pageData.contrastStore.bossForm;
            for (let propKey in preBossForm) {
              if (preStoreBossDto.hasOwnProperty(propKey)) {
                preBossForm[propKey] = preStoreBossDto[propKey];
              }
              if (propKey.startsWith("update")) {
                let key = propKey.slice(6);
                key = key.charAt(0).toLowerCase() + key.slice(1);
                preBossForm[propKey] = bossForm[key] !== preBossForm[key];
              }
            }
          }

          return pageData;
        })
        .catch(() => {});
    },
    methods: {
      /**
       * 切换商店比较版本事件
       * @param {string} storeId 商店主键
       */
      changeContrastStoreHandle(storeId) {
        let storeForm = this.store.storeForm;
        if (storeForm.id === storeId) {
          /*
            当前审核版本
           */
          if (this.isAuditModify) {
            // 获取最新一条审核通过商店详情
            this.getLastFinishStore(storeForm.businessId);
          } else {
            // 关闭对比
            this.contrastStore.showContrast = false;
          }
          return;
        }
        // 获取商店详情
        this.getStore(storeId);
      },
      /**
       * 获取最新一条审核通过商店详情方法
       * @param {string} businessId 业务主键
       */
      getLastFinishStore(businessId) {
        // 开始加载
        this.dataLoad = true;
        this.$axios.$get('/audit-store/last/finish/detail', { params: { businessId }})
          .then(({ data }) => {
            let storeDto = data.storeDto;
            let storeAccountDto = data.storeAccountDto;
            let storeBossDto = data.storeBossDto;
            // 数据映射
            this.mapStore(storeDto, storeAccountDto, storeBossDto);
          })
          .catch(() => {})
          .finally(() => {
            // 加载结束
            this.dataLoad = false;
          })
      },
      /**
       * 获取商店详情方法
       * @param {string} storeId 商店主键
       */
      getStore(storeId) {
        // 开始加载
        this.dataLoad = true;
        this.$axios.$get('/audit-store/audit/detail', { params: { id: storeId, contrastStatus: 1 }})
          .then(({ data }) => {
            let storeDto = data.storeDto;
            let storeAccountDto = data.storeAccountDto;
            let storeBossDto = data.storeBossDto;
            // 数据映射
            this.mapStore(storeDto, storeAccountDto, storeBossDto);
          })
          .catch(() => {})
          .finally(() => {
            // 加载结束
            this.dataLoad = false;
          });
      },
      /**
       * 映射商店数据方法
       * @param storeDto        商店基础数据
       * @param storeAccountDto 商店账户数据
       * @param storeBossDto    商店老板数据
       */
      mapStore(storeDto, storeAccountDto, storeBossDto) {
        const store = this.store;
        const contrastStore = this.contrastStore;
        contrastStore.showContrast = true;
        // 商店基础
        const storeForm = store.storeForm;
        const preStoreForm = contrastStore.storeForm;
        for (let propKey in preStoreForm) {
          if (storeDto.hasOwnProperty(propKey)) {
            preStoreForm[propKey] = storeDto[propKey];
          }
          if (propKey.startsWith("update")) {
            let key = propKey.slice(6);
            key = key.charAt(0).toLowerCase() + key.slice(1);
            preStoreForm[propKey] = storeForm[key] !== preStoreForm[key];
          }
        }
        // 商店账户
        const accountForm = store.accountForm;
        const preAccountForm = contrastStore.accountForm;
        for (let propKey in preAccountForm) {
          if (storeAccountDto.hasOwnProperty(propKey)) {
            preAccountForm[propKey] = storeAccountDto[propKey];
          }
          if (propKey.startsWith("update")) {
            let key = propKey.slice(6);
            key = key.charAt(0).toLowerCase() + key.slice(1);
            preAccountForm[propKey] = accountForm[key] !== preAccountForm[key];
          }
        }
        // 商店老板
        const bossForm = store.bossForm;
        const preBossForm = contrastStore.bossForm;
        for (let propKey in preBossForm) {
          if (storeBossDto.hasOwnProperty(propKey)) {
            preBossForm[propKey] = storeBossDto[propKey];
          }
          if (propKey.startsWith("update")) {
            let key = propKey.slice(6);
            key = key.charAt(0).toLowerCase() + key.slice(1);
            preBossForm[propKey] = bossForm[key] !== preBossForm[key];
          }
        }
      },
      /**
       * 页面滚动事件
       * @param {string} refName 标签ref名称
       */
      scrollHandle(refName) {
        const targetDiv = this.$refs[refName]
        let contentBoxDiv = this.$refs.contentBox;
        // 获取元素距离顶部距离
        let top = targetDiv.offsetTop - contentBoxDiv.offsetTop;
        // 滚动到指定div
        window.scrollTo({
          top: top,
          behavior: "smooth",
        });
      },
      /**
       * 提交审核结果事件
       */
      submitHandle() {
        this.$refs.auditForm.validate()
          .then(() => {
            this.buttonLoad = true;

            const auditForm = this.auditForm;
            const storeForm = this.store.storeForm;

            auditForm.storeId = storeForm.id;
            auditForm.businessId = storeForm.businessId;

            return this.$axios.$post('/audit-store/save', auditForm);
          })
          .then(() => {
            this.notify('success', '操作成功', '商店审核完成');

            this.backPrePageHandle();
          })
          .catch(() => {})
          .finally(() => {
            this.buttonLoad = false;
          });
      },
      /**
       * 返回商店管理页事件
       */
      backPrePageHandle() {
        // 跳回管理页面
        this.$router.replace({ name: 'admin-store-assign', params: { searchForm: this.prePageSearchForm }});
      },
      /**
       * 审核备注分割方法
       * @param auditRemark 审核备注
       * @return {string[]} 审核备注数组
       */
      auditRemarkSplit(auditRemark) {
        if (!auditRemark) {
          return [];
        }
        return auditRemark.split("\n");
      }
    }
  }
</script>

<template>
  <el-row :gutter="10" class="store-audit-page">
    <!-- 左侧 start -->
    <el-col :span="20">
      <el-card :body-style="{ padding: '15px' }" class="fixed-box">
        <el-form size="small" inline label-width="100px" ref="storeForm">
          <el-form-item label="比较版本" label-width="85px" class="mb0">
            <el-select v-model="contrastStoreId" @change="changeContrastStoreHandle" class="history-select">
              <el-option
                v-for="historyStore in store.historyList"
                :key="'history' + historyStore.storeId"
                :label="historyStore.submitTime + ' 版本'"
                :value="historyStore.storeId">
                <span style="float: left">{{ historyStore.submitTime }}</span>
                <span v-if="historyStore.isCurrent" style="float: right; color: #8492a6; font-size: 13px">当前版本</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="mb0">
            <el-button type="primary" @click="scrollHandle(module.auditM.refName)">审核</el-button>
          </el-form-item>
          <el-form-item class="mb0">
            <el-button :disabled="buttonLoad" size="small" @click="backPrePageHandle" class="back-btn">
              返 回
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <div ref="contentBox"
           v-loading="dataLoad"
           element-loading-text="数据加载中..."
           element-loading-spinner="el-icon-loading"
           class="content-box">
        <div :ref="module.historyAuditM.refName" class="module-box">
          <span class="m-title">{{ module.historyAuditM.name }}</span>
          <span @click="module.historyAuditM.isExpand = !module.historyAuditM.isExpand" class="m-btn">
            {{ module.historyAuditM.isExpand ? '收缩' : '展开' }}
          </span>
        </div>
        <el-collapse-transition>
          <el-timeline v-if="module.historyAuditM.isExpand" class="audit-box">
            <el-timeline-item v-for="(auditGroup, index) in store.auditGroupList"
                              :key="'auditGroup' + index"
                              :timestamp="auditGroup.name"
                              placement="top"
                              color="#0bbd87">
              <el-card v-for="audit in auditGroup.list"
                       :key="'audit' + audit.id"
                       :body-style="{ padding: '10px' }"
                       class="audit">
                <div class="title">
                  {{ audit.status === 0 ? '通过' : '拒绝'}}
                </div>
                <div v-if="audit.auditRemark" class="auditRemark">
                  <div v-for="(remark, index) in auditRemarkSplit(audit.auditRemark)" :key="'auditRemark' + index">
                    {{ remark }}
                  </div>
                </div>
                <div class="user">
                  <span>{{ audit.createUser }}</span>
                  提交于
                  <span>{{ audit.createTime }}</span>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-collapse-transition>

        <div :ref="module.storeM.refName" class="module-box">
          <span class="m-title">{{ module.storeM.name }}</span>
          <span @click="module.storeM.isExpand = !module.storeM.isExpand" class="m-btn">
            {{ module.storeM.isExpand ? '收缩' : '展开' }}
          </span>
        </div>
        <el-collapse-transition>
          <el-form v-if="module.storeM.isExpand" size="mini" label-width="100px" ref="storeForm">
            <el-form-item label="商店名称">
              <el-input v-model="store.storeForm.name" readonly class="width30Percent"
                        :class="{'is-update': contrastStore.storeForm.updateName}">
              </el-input>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast" label="商店名称" class="contrast-field">
              <el-input v-model="contrastStore.storeForm.name" readonly class="width30Percent"></el-input>
            </el-form-item>
            <el-form-item label="商店地址">
              <div class="mb10">
                <el-input v-model="store.storeForm.addressProvinceName" readonly class="width20Percent"
                          :class="{'is-update': contrastStore.storeForm.updateAddressProvinceName}">
                  <span slot="suffix">省</span>
                </el-input>
                <el-input v-model="store.storeForm.addressCityName" readonly class="width20Percent"
                          :class="{'is-update': contrastStore.storeForm.updateAddressCityName}">
                  <span slot="suffix">市</span>
                </el-input>
                <el-input v-model="store.storeForm.addressDistrictName" readonly class="width20Percent"
                          :class="{'is-update': contrastStore.storeForm.updateAddressDistrictName}">
                  <span slot="suffix">区/县</span>
                </el-input>
                <el-input v-model="store.storeForm.addressStreetName" readonly class="width20Percent"
                          :class="{'is-update': contrastStore.storeForm.updateAddressStreetName}">
                  <span slot="suffix">街道</span>
                </el-input>
              </div>
              <div>
                <el-input v-model="store.storeForm.address" readonly class="width30Percent"
                          :class="{'is-update': contrastStore.storeForm.updateAddress}">
                </el-input>
              </div>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast" label="商店地址" class="contrast-field">
              <div class="mb10">
                <el-input v-model="contrastStore.storeForm.addressProvinceName" readonly class="width20Percent">
                  <span slot="suffix">省</span>
                </el-input>
                <el-input v-model="contrastStore.storeForm.addressCityName" readonly class="width20Percent">
                  <span slot="suffix">市</span>
                </el-input>
                <el-input v-model="contrastStore.storeForm.addressDistrictName" readonly class="width20Percent">
                  <span slot="suffix">区/县</span>
                </el-input>
                <el-input v-model="contrastStore.storeForm.addressStreetName" readonly class="width20Percent">
                  <span slot="suffix">街道</span>
                </el-input>
              </div>
              <div>
                <el-input v-model="contrastStore.storeForm.address" readonly class="width30Percent"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="商店面积">
              <el-input v-model="store.storeForm.area" readonly class="width30Percent"
                        :class="{'is-update': contrastStore.storeForm.updateArea}">
                <span slot="suffix">平米</span>
              </el-input>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast" label="商店面积" class="contrast-field">
              <el-input v-model="contrastStore.storeForm.area" readonly class="width30Percent">
                <span slot="suffix">平米</span>
              </el-input>
            </el-form-item>
            <el-form-item label="经营大类">
              <el-input :value="store.storeForm.mainClassName" readonly class="width30Percent"
                        :class="{'is-update': contrastStore.storeForm.updateMainClass}">
              </el-input>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast" label="经营大类" class="contrast-field">
              <el-input :value="contrastStore.storeForm.mainClassName" readonly class="width30Percent"></el-input>
            </el-form-item>
            <el-form-item label="经营小类">
              <el-input :value="store.storeForm.subClassName" readonly class="width30Percent"
                        :class="{'is-update': contrastStore.storeForm.updateSubClass}">
              </el-input>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast" label="经营小类" class="contrast-field">
              <el-input :value="contrastStore.storeForm.subClassName" readonly class="width30Percent"></el-input>
            </el-form-item>
          </el-form>
        </el-collapse-transition>
        <div :ref="module.accountM.refName" class="module-box">
          <span class="m-title">{{ module.accountM.name }}</span>
          <span @click="module.accountM.isExpand = !module.accountM.isExpand" class="m-btn">
            {{ module.accountM.isExpand ? '收缩' : '展开' }}
          </span>
        </div>
        <el-collapse-transition>
          <el-form v-if="module.accountM.isExpand" size="mini" label-width="100px" ref="accountForm">
            <el-form-item label="账户类型">
              <el-input :value="typeName" readonly class="width30Percent"
                        :class="{'is-update': contrastStore.accountForm.updateType}">
              </el-input>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast" label="账户类型" class="contrast-field">
              <el-input :value="preTypeName" readonly class="width30Percent"></el-input>
            </el-form-item>
            <el-form-item v-if="store.accountForm.type === 1" label="账户姓名">
              <el-input v-model="store.accountForm.name" readonly class="width30Percent"
                        :class="{'is-update': contrastStore.accountForm.updateName}">
              </el-input>
            </el-form-item>
            <el-form-item v-if="store.accountForm.type === 1" label="身份证号">
              <el-input v-model="store.accountForm.idCard" readonly class="width30Percent"
                        :class="{'is-update': contrastStore.accountForm.updateIdCard}">
              </el-input>
            </el-form-item>
            <el-form-item v-if="store.accountForm.type === 0" label="企业名称">
              <el-input v-model="store.accountForm.enterpriseName" readonly class="width30Percent"
                        :class="{'is-update': contrastStore.accountForm.updateEnterpriseName}">
              </el-input>
            </el-form-item>
            <el-form-item v-if="store.accountForm.type === 0" label="社会统一信用代码">
              <el-input v-model="store.accountForm.enterpriseNo" readonly class="width30Percent"
                        :class="{'is-update': contrastStore.accountForm.updateEnterpriseNo}">
              </el-input>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast && contrastStore.accountForm.type === 1" label="账户姓名"
                          class="contrast-field">
              <el-input v-model="contrastStore.accountForm.name" readonly class="width30Percent"></el-input>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast && contrastStore.accountForm.type === 1" label="身份证号"
                          class="contrast-field">
              <el-input v-model="contrastStore.accountForm.idCard" readonly class="width30Percent"></el-input>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast && contrastStore.accountForm.type === 0" label="企业名称"
                          class="contrast-field">
              <el-input v-model="contrastStore.accountForm.enterpriseName" readonly class="width30Percent"></el-input>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast && contrastStore.accountForm.type === 0" label="社会统一信用代码"
                          class="contrast-field">
              <el-input v-model="contrastStore.accountForm.enterpriseNo" readonly class="width30Percent"></el-input>
            </el-form-item>
            <el-form-item label="银行卡号">
              <el-input v-model="store.accountForm.bankNo" readonly class="width30Percent"
                        :class="{'is-update': contrastStore.accountForm.updateBankNo}">
              </el-input>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast" label="银行卡号" class="contrast-field">
              <el-input v-model="contrastStore.accountForm.bankNo" readonly class="width30Percent"></el-input>
            </el-form-item>
            <el-form-item label="银行名称">
              <el-input v-model="store.accountForm.bankName" class="width30Percent"
                        :class="{'is-update': contrastStore.accountForm.updateBankName}">
              </el-input>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast" label="银行名称" class="contrast-field">
              <el-input v-model="contrastStore.accountForm.bankName" class="width30Percent"></el-input>
            </el-form-item>
            <el-form-item label="支行名称">
              <el-input v-model="store.accountForm.bankBranchName" readonly class="width30Percent"
                        :class="{'is-update': contrastStore.accountForm.updateBankBranchName}">
              </el-input>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast" label="支行名称" class="contrast-field">
              <el-input v-model="contrastStore.accountForm.bankBranchName" readonly class="width30Percent"></el-input>
            </el-form-item>
            <el-form-item label="预留手机号">
              <el-input v-model="store.accountForm.bankMobile" readonly class="width30Percent"
                        :class="{'is-update': contrastStore.accountForm.updateBankMobile}">
              </el-input>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast" label="预留手机号" class="contrast-field">
              <el-input v-model="contrastStore.accountForm.bankMobile" readonly class="width30Percent"></el-input>
            </el-form-item>
            <el-form-item label="开户城市">
              <el-input v-model="store.accountForm.bankCityName" readonly class="width30Percent"
                        :class="{'is-update': contrastStore.accountForm.updateBankCityName}">
              </el-input>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast" label="开户城市" class="contrast-field">
              <el-input v-model="contrastStore.accountForm.bankCityName" readonly class="width30Percent"></el-input>
            </el-form-item>
          </el-form>
        </el-collapse-transition>
        <div :ref="module.bossM.refName" class="module-box">
          <span class="m-title">{{ module.bossM.name }}</span>
          <span @click="module.bossM.isExpand = !module.bossM.isExpand" class="m-btn">
            {{ module.bossM.isExpand ? '收缩' : '展开' }}
          </span>
        </div>
        <el-collapse-transition>
          <el-form v-if="module.bossM.isExpand" size="mini" label-width="100px" ref="bossForm">
            <el-form-item label="老板姓名">
              <el-input v-model="store.bossForm.name" readonly class="width30Percent"
                        :class="{'is-update': contrastStore.bossForm.updateName}">
              </el-input>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast" label="老板姓名" class="contrast-field">
              <el-input v-model="contrastStore.bossForm.name" readonly class="width30Percent"></el-input>
            </el-form-item>
            <el-form-item label="老板性别">
              <el-input :value="genderName" readonly class="width30Percent"
                        :class="{'is-update': contrastStore.bossForm.updateGender}">
              </el-input>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast" label="老板性别" class="contrast-field">
              <el-input :value="preGenderName" readonly class="width30Percent"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input v-model="store.bossForm.idCard" readonly class="width30Percent"
                        :class="{'is-update': contrastStore.bossForm.updateIdCard}">
              </el-input>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast" label="身份证号" class="contrast-field">
              <el-input v-model="contrastStore.bossForm.idCard" readonly class="width30Percent"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="store.bossForm.mobile" readonly class="width30Percent"
                        :class="{'is-update': contrastStore.bossForm.updateMobile}">
              </el-input>
            </el-form-item>
            <el-form-item v-if="contrastStore.showContrast" label="手机号" class="contrast-field">
              <el-input v-model="contrastStore.bossForm.mobile" readonly class="width30Percent"></el-input>
            </el-form-item>
          </el-form>
        </el-collapse-transition>
        <div :ref="module.auditM.refName" class="module-box btn-box">
          <span class="m-title">{{ module.auditM.name }}</span>
          <span @click="module.auditM.isExpand = !module.auditM.isExpand" class="m-btn">
            {{ module.auditM.isExpand ? '收缩' : '展开' }}
          </span>
        </div>
        <el-collapse-transition>
          <el-form v-if="module.auditM.isExpand" :model="auditForm" :rules="auditRules" size="mini" label-width="100px"
                   ref="auditForm">
            <el-form-item label="审核结果" prop="status">
              <el-radio-group v-model="auditForm.status">
                <el-radio :label="0" border>通过</el-radio>
                <el-radio :label="1" border>拒绝</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="审核回复" prop="auditRemark">
              <el-input
                type="textarea"
                placeholder="请输入审核回复"
                v-model="auditForm.auditRemark"
                :rows="4"
                maxlength="250"
                show-word-limit
                resize="none"
                class="width50Percent"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button :disabled="buttonLoad" type="primary" size="small" @click="submitHandle">
                提 交
              </el-button>
            </el-form-item>
          </el-form>
        </el-collapse-transition>
      </div>
    </el-col>
    <!-- 左侧 end -->
    <!-- 右侧 start -->
    <el-col :span="4">
      <el-card :body-style="{ padding: '15px' }" class="nav-box">
        <div v-for="m in module" :key="'nav' + m.refName" @click="scrollHandle(m.refName)" class="nav-btn">
          {{ m.name }}
        </div>
      </el-card>
    </el-col>
    <!-- 右侧 end -->
  </el-row>
</template>

<style scoped>
  .store-audit-page .fixed-box {
    width: 83.5%;
    position: fixed;
    top: 110px;
    z-index: 9;
  }
  .store-audit-page .fixed-box .history-select {
    width: 300px;
  }
  .store-audit-page .content-box {
    margin-top: 75px;
  }
  .store-audit-page .content-box .module-box {
    background-color: #F2F6FC;
    border-radius: 5px;
    padding-left: 5px;
    margin-bottom: 10px;
    line-height: 35px;
  }
  .store-audit-page .content-box .module-box .m-title {
    font-size: 18px;
    font-weight: bold;
  }
  .store-audit-page .content-box .module-box .m-btn {
    float: right;
    font-size: 14px;
    margin-right: 20px;
    cursor: pointer;
  }
  .store-audit-page .content-box .module-box .m-btn:hover {
    color: var($ELEMENT_UI_THEME);
  }
  .store-audit-page .content-box .audit-box {
    margin-left: 10px;
    max-height: 300px;
    overflow-y: auto;
  }
  .store-audit-page .content-box .audit-box .audit {
    width: 50%;
    margin-top: 10px;
  }
  .store-audit-page .content-box .audit-box .audit .title {
    font-size: 16px;
    font-weight: bold;
  }
  .store-audit-page .content-box .audit-box .audit .auditRemark {
    font-size: 15px;
    margin-top: 5px;
    color: #f81313;
  }
  .store-audit-page .content-box .audit-box .audit .user {
    margin-top: 10px;
  }
  .store-audit-page .content-box .audit-box .audit .user span {
    font-size: 14px;
    color: #909399;
    margin-top: 5px;
  }
  .store-audit-page .content-box .contrast-field >>> .el-form-item__label {
    color: red;
  }
  .store-audit-page .content-box .is-update >>> .el-input__inner {
    color: #0bc99c;
  }
  .store-audit-page .nav-box {
    width: 205px;
    position: fixed;
    top: 185px;
    max-height: calc(100vh - 20px);
    overflow: auto;
  }
  .store-audit-page .nav-box .nav-btn {
    line-height: 30px;
    font-weight: bold;
    cursor: pointer;
  }
  .store-audit-page .nav-box .nav-btn:hover {
    background-color: #F2F6FC;
  }
  .store-audit-page .btn-box {
    padding-left: 100px;
    margin-bottom: 18px;
  }

</style>

<style scoped>
  .store-audit-page .width20Percent {
    width: 20%;
  }
  .store-audit-page .width30Percent {
    width: 30%;
  }
  .store-audit-page .width50Percent {
    width: 50%;
  }
  .store-audit-page .mb10 {
    margin-bottom: 10px;
  }
  .store-audit-page .mb0 {
    margin-bottom: 0 !important;
  }
</style>
